<template>
<div class="app-container" style="height: 100%;overflow-y: auto;">
  <!--<el-card class="box-card">-->

  <!--</el-card>-->
  <!--<div slot="header" class="clearfix">-->
    <!--<span>用户</span>-->
  <!--</div>-->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户信息" name="first">
        <el-form :rules="rules" ref="targetForm" :model="temp" label-width="130px" label-position='left' size="small">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="所属组织" prop="orgName">
                <el-input v-model="temp.orgName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名称" prop="name">
                <el-input v-model="temp.name" placeholder="用户名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="用户状态" prop="status">
                <el-radio v-if="item.key !='2'" v-model="temp.status" v-for="item in statusOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender" :show-overflow-tooltip='true'>
                <el-radio v-model="temp.gender" v-for="item in sexOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="登录名称" prop="loginName">
                <el-input v-model="temp.loginName" placeholder="登录名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="移动电话">
                <el-input v-model="temp.mobilePhone" placeholder="移动电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="用户名称英文">
                <el-input v-model="temp.nameEn" placeholder="用户名称英文"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信号">
                <el-input v-model="temp.wechat" placeholder="微信号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="昵称">
                <el-input v-model="temp.nick" placeholder="昵称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="temp.birthday"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  type="date"
                  placeholder="出生日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="联系地址">
                <el-input v-model="temp.address" placeholder="联系地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="固定电话">
                <el-input v-model="temp.telephone" placeholder="固定电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="temp.cardId" placeholder="身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱">
                <el-input v-model="temp.email" placeholder="邮箱"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="排序号" prop="orderNo">
                <el-input v-model="temp.orderNo" placeholder="排序号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户编码">
                <el-input v-model="temp.code" placeholder="用户编码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="工作证号码">
                <el-input v-model="temp.employerId" placeholder="工作证号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="政治面貌">
                <el-input v-model="temp.politicalStatus" placeholder="政治面貌"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="邮政编码">
                <el-input v-model="temp.zipCode" placeholder="邮政编码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ号">
                <el-input v-model="temp.qq" placeholder="QQ号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="允许访问开始时间">
                <el-date-picker
                  v-model="temp.accessStartDate"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="startDatePicker"
                  type="datetime"
                  placeholder="允许访问开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="允许访问结束时间">
                <el-date-picker
                  v-model="temp.accessEndDate"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="endDatePicker"
                  type="datetime"
                  placeholder="允许访问结束时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="个人签名" size='small'>
                <el-input v-model="temp.motto" placeholder="个人签名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职务" prop="status">
                <el-select v-model="temp.postStatus" clearable placeholder="请选择职务">
                  <el-option
                    v-for="item in postStatusOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="是否使用RC" prop="isTrans">
                <el-select v-model="temp.isTrans" clearable placeholder="是否使用RC">
                  <el-option
                    v-for="item in isTransOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账户类型" prop="accountType">
                <el-select v-model="temp.accountType" clearable placeholder="账户类型">
                  <el-option
                    v-for="item in accountTypeOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="备注信息" >
                <el-input type = "textarea" v-model="temp.remarks" placeholder="备注信息" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人签名">
                <div>
                  <el-upload
                    class="avatar-uploader"
                    name="uploadFile"
                    :action=getimageUploadUrl()
                    :show-file-list="false"
                    :data= filedata
                    :headers="fileHeaders"
                    :file-list="fileList"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imagesUp" :src="imagesUp" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row :gutter="40">-->
            <!--<el-form-item label="选择兼职" style="padding: 0 20px;">-->
              <!--<el-button type="primary" @click="changeJob">请选择</el-button>-->
            <!--</el-form-item>-->
          <!--</el-row>-->
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="兼职机构" name="second">
        <partTime :editData="editData" :partTimeData="temp.partTime" @changeCloseDialog="changeCloseDialog" @closeD="closeD"></partTime>
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="40">
      <el-col style="text-align: right;margin-top: 5px;">
        <el-button  size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
        <el-button  size="small" class="filter-item" @click="closeSelf">关 闭</el-button>
      </el-col>
    </el-row>
  </div>
  <!--新增角色兼职选择-->
  <el-dialog
    append-to-body
    top="0"
    :close-on-click-modal="false"
    title="选择兼职"
    :visible.sync="dialogVisiblepartTime"
    width="70%">
    <partTime :editData="editData" :partTimeData="temp.partTime" @changeCloseDialog="changeCloseDialog" @closeD="closeD"></partTime>
  </el-dialog>
</div>
</template>

<script>
import partTime from './components/partJobChange'
// import { createImUser } from '@/api/systemManage/userManagement'
import { getUuid } from '@/api/common/utilCommon'
import { getToken } from '@/utils/auth'
import {
  insertItem
} from '@/api/systemManage/userManagementEdit'
import {
  statusOptions,
  yesOrNoOptions,
  sexOptions
} from '@/utils/allOptions'
import { formatDate, formatTime } from '@/utils/date'
export default {
  name: 'newUser',
  components: {
    partTime
  },
  props: ['addUserData'],
  data() {
    return {
      fileHeaders: {
        Authorization: 'bearer ' + getToken()
      },
      imagesUp: '',
      fileList: [],
      activeName: 'first',
      postStatusOptions: [],
      isTransOptions: [],
      accountTypeOptions: [],
      filedata: {
        busiType: 'uums',
        docUse: '1',
        busiSubType: 'userSignature',
        busiPrimaryKey: '',
      },
      editData: [],
      rules: {
        name: [{
          required: true,
          message: '请输入用户姓名',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        nick: [{
          required: true,
          message: '请输入用户姓名',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 50,
          message: '长度在 0 到 50 个字符',
          trigger: 'blur'
        },
        {
          max: 50,
          message: '最大 50 个字符',
          trigger: 'blur'
        }
        ],
        loginName: [{
          required: true,
          message: '请输入登录名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        orderNo: [{
          required: true,
          message: '请输入排序号',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ]
      },
      dialogVisiblepartTime: false,
      temp: {
        'id': '',
        'orgId': '',
        'loginName': '',
        'password': '',
        'name': '',
        'nameEn': '',
        'code': '',
        'orderNo': '',
        'status': '',
        'gender': '',
        'birthday': '',
        'mobilePhone': '',
        'telephone': '',
        'email': '',
        'homePhone': '',
        'faxno': '',
        'qq': '',
        'wechat': '',
        'address': '',
        'zipCode': '',
        'office': '',
        'cardId': '',
        'workDate': '',
        'employedDate': '',
        'employerId': '',
        'politicalStatus': '',
        'remarks': '',
        'passModDate': '',
        'fcUser': '',
        'fcTime': '',
        'lmUser': '',
        'lmTime': '',
        'accessStartDate': '',
        'accessEndDate': '',
        'nick': '',
        'partTime': [],
        'sysUserPtOrgInsertInputList': [],
        'ptType': '',
        'isTrans': '1',
        'accountType':'0'
      },
      targetUserId: '',
      // -------Options-----------
      statusOptions,
      yesOrNoOptions,
      sexOptions,
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate()
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      var result=Math.random();
      this.imagesUp = res.data.fileRootPath+res.data.fileRelativePath+"?result="+result;
    },
    beforeAvatarUpload(file) {
      let deleteflag = false;
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    getimageUploadUrl(){
      return process.env.BASE_API + '/file' + '/SysFileInfo/uploadSingleFile'
    },
    handleClick(tab, event) {
      this.temp.ptType = '0'
    },
    GetCodeList() {
      let args = {}
      args.codeType = 'JOB_TYPE_CATEGORY_CODE'
      args.codeStatus = '0'

      this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
        let data = res.data
        if (data && data.length > 0) {
          data.forEach((item, i) => {
            item.id = JSON.stringify({
              'id': item.codeKey,
              'name': item.codeName
            })
          })
        }
        this.postStatusOptions = data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    GetIsTransCodeList() {
      let args = {}
      args.codeType = 'IS_TRANS_CATEGORY_CODE'
      args.codeStatus = '0'

      this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
        let data = res.data
        if (data && data.length > 0) {
          data.forEach((item, i) => {
            item.id = JSON.stringify({
              'id': item.codeKey,
              'name': item.codeName
            })
          })
        }
        this.isTransOptions = data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    GetAccountTypeCodeList() {
      let args = {}
      args.codeType = 'ACCOUNT_TYPE_CATEGORY_CODE'
      args.codeStatus = '0'

      this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
        let data = res.data
        if (data && data.length > 0) {
          data.forEach((item, i) => {
            item.id = JSON.stringify({
              'id': item.codeKey,
              'name': item.codeName
            })
          })
        }
        this.accountTypeOptions = data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    changeJob() {
      this.temp.ptType = '0'
      this.dialogVisiblepartTime = true
    },
    closeD() {
      this.dialogVisiblepartTime = false
    },
    changeCloseDialog(val) {
      this.temp.sysUserPtOrgInsertInputList = val
      this.dialogVisiblepartTime = false
    },
    closeSelf() {
      this.$emit('changeCloseDialog')
      // this.$router.push({ name: 'userManagement' })
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          this.temp.password = '123456'
          insertItem(this.temp).then(response => {
            if (response.data.statusCode === 200) {
              // const imUserData = {
              //   'userId': response.data.data.loginName,
              //   'name': response.data.data.name,
              //   'mobile': response.data.data.mobilePhone,
              //   'phone': response.data.data.telephone,
              //   'email': response.data.data.email,
              //   'gender': Number(response.data.data.gender),
              //   'dept': [0]
              // }
              // createImUser(imUserData).then(res => {
              //   if (res.data.statusCode === 200) {
              //     this.$notify({
              //       title: '成功',
              //       message: '同步IM成功',
              //       type: 'success',
              //       duration: 2000
              //     })
              //   } else {
              //     this.$notify({
              //       title: '错误',
              //       message: '同步IM失败，请手动同步',
              //       type: 'error',
              //       duration: 2000
              //     })
              //   }
              // })
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: response.data.message,
                type: 'error',
                duration: 2000
              })
            }
            this.$emit('changeCloseDialog')
            // this.$router.push({ name: 'userManagement' })
            this.targetUserId = response.data.data.id
          })
        }
      })
    },
    beginDate() {
      let self = this
      return {
        disabledDate(time) {
          if (self.temp.accessEndDate) {
            return (
              new Date(self.temp.accessEndDate).getTime() < time.getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    processDate() {
      let self = this
      return {
        disabledDate(time) {
          if (self.temp.accessStartDate) {
            return (
              new Date(self.temp.accessStartDate).getTime() > time.getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  },
  created() {
    this.GetCodeList()
    this.GetIsTransCodeList()
    this.GetAccountTypeCodeList()
    this.temp.orgId = this.addUserData.addUserOrgId
    this.temp.orgName = this.addUserData.addUserOrgName
    this.editData.orgId = this.addUserData.addUserOrgId
    getUuid().then(res => {
      this.temp.id = res.data.data;
      this.filedata.busiPrimaryKey = res.data.data;
    });
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 30px;
    display: block;
  }
</style>
<style scoped>
  .app-container >>> .el-tabs__content{
    margin-top: 16px;
  }
</style>

